<template>
	<div class="goods-index">
		<div class="swiper">
			<swiper height="7.5rem" dots-position="center" dots-class="swiper-dot" loop auto :interval="3000">
				<swiper-item v-for="(item,index) in goodsIndex.goodsInfo.mainAtta" :key='index'>
					<div class="img-box">
						<img v-lazy="item.attaUrl">
					</div>
				</swiper-item>
				<div class="goods-tag">
					<span v-for='(item,index) in goodsIndex.goodsInfo.goodsLabels' v-bind:style="{color:item.labelColor,backgroundColor:item.labelBackColor}" :key='index' class="tag">{{item.labelName}}</span>
				</div>
			</swiper>
		</div>
		<div class="goods-info">
			<div class="ecs ecs-2 title">
				{{goodsIndex.selectNorm.goodsName}}
			</div>
			<div class="ecs ecs-5 info">
				{{goodsIndex.selectNorm.goodsDesc}}
			</div>
			<div class="price-box">
				<div class="price">
					月供：<span class="app-color-x"> ￥{{goodsIndex.selectNorm.installmentAmount|price}}</span>
				</div>
				<span class="scale">{{goodsIndex.selectNorm.saleNum}}件已售</span>
			</div>
			<div class="basep-box">
				<span>运费：￥{{goodsIndex.selectNorm.freight|price}}</span>
			</div>
			<div class="basep-box">
				<span>现价：￥{{goodsIndex.selectNorm.price|price}}</span>
				<span class="base-price">市场价：￥{{goodsIndex.selectNorm.basePrice|price}}</span>
			</div>

			<div v-if='goodsIndex.goodsInfo.goodsType=="OVERSEAS"' class='overseas flex flex-r flex-item-between flex-item-v-center'>
				<div class='flex flex-item-center'>
					<div class='originImageUrl'>
						<img :src='goodsIndex.goodsInfo.originImageUrl ? goodsIndex.goodsInfo.originImageUrl :"https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/Placehodler/img_placeholder_84_84@2x.png" ' />
					</div>
					{{goodsIndex.goodsInfo.origin}}

				</div>
				<div>{{goodsIndex.goodsInfo.shipAddress}}</div>
				<div>{{goodsIndex.goodsInfo.warehouse}}</div>
			</div>

		</div>
		<div class="classify-list">
			<div class="classify-item" @click='showGoods'>
				<span class="classify-show">已选&nbsp;"{{goodsIndex.selectNorm.normName}}"</span>
			</div>
			<div @click='showPresent(true)' class="classify-item icons">
				<div class="img-tip">
					<img class='mxfq' src='../../assets/imgs/icon-mxfq.png' /> 免息分期
				</div>
				<div class="img-tip">
					<img class='zpbz' src='../../assets/imgs/icon-bxbzp.png' /> 正品保障
				</div>
				<div class="img-tip" v-if="goodsIndex.goodsInfo.goodsType == 'OVERSEAS'">
					<img class='kdby' src='../../assets/imgs/icon-htms.png' /> 海淘保税
				</div>
			</div>
		</div>
		<div class="img-info-header">
			<img src='../../assets/imgs/fx_icon.png' />
		</div>
		<div class="img-infos">
			<template v-for='(item,index) in goodsIndex.goodsInfo.otherAtta'>
				<img :key='index' v-lazy='item.attaUrl' />
			</template>
		</div>
		
		
		<div class='flex flex-item-center footertext flex-c'>
      <div>本商品及服务由{{goodsIndex.goodsInfo.supplierName}}提供</div>
      <div>如有疑问,请拨打{{goodsIndex.goodsInfo.customerPhone}}</div>
      <div>众安在线股票代码6060.HK</div>
    </div>
    
    
		<div class="btn pbtn" @click='showGoods'>
			立即购买
		</div>
		<actionsheet v-model="goodsIndex.showClassModal">
			<template slot="header">
				<div class="goods-menu">
					<div class="menu-header-box">
						<div class="menu-header">
							<div class="h-left">
								<img :src='goodsIndex.selectNorm.normImageUrl' />
							</div>
							<div class="h-right">
								<div class="h-close">
									<img @click='hideClassModal(false)' src='../../assets/imgs/close_modal.png' />
								</div>
								<div class="title">
									{{goodsIndex.selectNorm.goodsName}}
								</div>
								<div class="price">
									价格：￥{{goodsIndex.selectNorm.price|price}}
								</div>
							</div>
						</div>
						<div class="goods-classify">
							<ul class="classify-box">
								<li v-for='(item,index) in goodsIndex.goodsInfo.normList' @click='changeSelect(index)' v-bind:class="{'active':(index==goodsIndex.selectIndex)}">{{item.normName}}</li>
							</ul>
						</div>
						<div class="goods-nums">
							<span>购买数量</span>
							<div class="input-box">
								<div @click='subNum' class="i-btn">-</div>
								<input maxLength="2" readonly='readonly' type='number' v-model='goodsIndex.selectNum' />
								<div @click='addNum' class="i-btn">+</div>
							</div>
						</div>
					</div>
					<div @click='submitOrder' class="btn goods-pay">
						确认购买
					</div>
				</div>
			</template>
		</actionsheet>
		<actionsheet  v-model="goodsIndex.showPresent">
			<template slot="header">
				<div class="present-modal">
					<div class="h-close">
						<span>花伴商城服务</span>
						<img @click='showPresent(false)' src='../../assets/imgs/close_modal.png' />
					</div>
					<ul>
						<li class="mxfq">
							<label>免息分期</label>
							<div class="content">
								使用马上花分期支付，立享三期免息。
							</div>
						</li>
						<li class="zpbz">
							<label>正品保证</label>
							<div class="content">
								花伴在售商品均由平台认证服务商提供，均通过全国权威鉴定机构检验，花伴商城联合众安保险为每一件商品承保，请放心选购。
							</div>
						</li>
						<li class="sdfh">
							<label>闪电发货</label>
							<div class="content">
								花伴承诺所有商品在订单生成后第一时间发货，您可通过订单详情内物流进度了解物流详情。
							</div>
						</li>
						<li class="wygm">
							<label>99元免运费</label>
							<div class="content">
								单笔订单满99元免运费。
							</div>
						</li>
						<li class="jgsm" v-if="goodsIndex.goodsInfo.goodsType == 'OVERSEAS'">
							<label>海淘保税</label>
							<div class="content">
								海外购商品已包含跨境电商进口税，您无需再进行支付。
							</div>
						</li>
					</ul>
				</div>
			</template>
		</actionsheet>
		<loading text='加载中...' :show='goodsIndex.showLoading'></loading>
		<toast v-model='goodsIndex.toastFlag' type="text" width='70%'>
			<template>{{goodsIndex.toastText}}</template>
		</toast>
	</div>
</template>
<script>
	import { Swiper, SwiperItem, Actionsheet, Loading, Toast } from 'vux';
	import Utils from '@/util/util'
	import { mapActions, mapState } from 'vuex';
	import goodsIndex from '@/vuex/modules/goods';
	export default {
		components: {
			Swiper,
			SwiperItem,
			Actionsheet,
			Loading,
			Toast
		},
		data() {
			return {
				webHeight: "400px",
				webWidth: "100%"
				,userInfo: Utils.getUserInfo()
			}
		},
		created() {
			document.title = '商品详情';
			window.onJdiframeFrameChangeListener = (arg, webWidth) => {
				this.onJdiframeFrameChangeListener(arg, webWidth);
			}
		},
		mounted() {
			this.init();
			this.getGoodsInfo();
		},
		methods: {
			showGoods(e) {
				if(!this.userInfo){
					this.$router.push("/login");
					return;
				}
				this.$store.dispatch("goodsIndex/changeModal", true);
			},
			init(e) {
				this.$store.dispatch("goodsIndex/init");
			},
			onJdiframeFrameChangeListener(arg, webWidth) {
				this.webHeight = (arg > window.screen.height ? arg : window.screen.height) + 'px';
				this.webWidth = webWidth + "px";
			},
			setSelectIndex(id) {
				//TODO 设置默认选项
				this.$store.dispatch("goodsIndex/setSelectIndex", id);
			},
			addNum() {
				var {
					selectNum
				} = this.goodsIndex;
				if(Number(selectNum) < 0) {
					selectNum = 1;
				} else {
					selectNum++;
				}
				if(selectNum > 99) {
					selectNum = 99;
					return this.toast("数量选择最多99~");
				}
				this.$store.dispatch("goodsIndex/setSelectNum", selectNum);
			},
			subNum() {
				var {
					selectNum
				} = this.goodsIndex;
				if(Number(selectNum) < 0) {
					selectNum = 1;
				} else {
					selectNum--;
				}
				if(selectNum < 1) {
					selectNum = 1;
					this.toast("数量选择最多少1~");
				}
				this.$store.dispatch("goodsIndex/setSelectNum", selectNum);
			},
			getGoodsInfo() {
				var {
					id,
					sid,
					isShlf
				} = this.$route.query;
				if(sid) {
					this.setSelectIndex(sid);
				}
				if(id) {
					if (isShlf) {
						let params = {
							shelfItemId: id,
							isShlf: isShlf
						}
						this.$store.dispatch("goodsIndex/getGoodsInfo", params);
					} else{
						this.$store.dispatch("goodsIndex/getGoodsInfo", id);
					}
					
				} else {
					this.$router.push("/find");
				}
			},
			changeSelect(index) {
				this.$store.dispatch("goodsIndex/changeSelect", index);
			},
			hideClassModal() {
				this.$store.dispatch("goodsIndex/changeModal", false);
			},
			showPresent(isShow) {
				this.$store.dispatch("goodsIndex/changePresent", isShow);
			},
			submitOrder() {
				var {
					goodsInfo,
					selectNorm,
					selectNum
				} = this.goodsIndex;
				var subInfo = {
					goodsId: this.$route.query.id,
					normId: selectNorm.normId,
					normName: selectNorm.normName,
					selecNum: selectNum,
					goodsName: selectNorm.goodsName || '未知',
					price: selectNorm.price,
					goodsId: goodsInfo.id,
					goodsType: goodsInfo.goodsType,
					mainImg: selectNorm.normImageUrl
				}
				if(Utils.isWxPlus()) {
					wx.miniProgram.navigateTo({
						url: "/pages/goods/submitGoods/submitGoods?" + Utils.object2query(subInfo)
					})
				} else {
					//TODO 后期做h5跳转逻辑
					sessionStorage.setItem('subInfo',JSON.stringify(subInfo))
					this.$router.push("/submit-goods");
				}
			}
			
		},
		computed: {
			goodsIndex() {
				return this.$store.state.goodsIndex
			}
		},
		watch: {
			selectNum() {
				console.log(arguments);
			}
		},
		filters: {
			price(price) {
				if(price) {
					return Number(price / 100).toFixed(2);
				}
				return "0.00";
			}
		}
	}
</script>
<style lang='less'>
	@import '../styles/theme.less';
	.jd-content {
		width: 375px;
		display: block;
		position: relative;
		iframe {
			transform-origin: 0 0;
			height: 100%;
		}
	}
	
	.goods-index {
		background-color: #f2f2f2;
		padding-bottom: 1rem;
		.present-modal {
			/*height: 8.5rem;*/
			background-color: #fff;
			flex-direction: column;
			padding: 0 .3rem;
			display: flex;
			.h-close {
				height: .8rem;
				display: flex;
				justify-content: flex-end;
				padding-left: .4rem;
				align-items: center;
				span {
					flex: 1;
					text-align: center;
					color: #464646;
					font-size: .32rem;
					font-weight: 700;
				}
				img {
					width: .4rem;
					height: .4rem;
				}
			}
			ul {
				flex: 1;
				overflow: scroll;
				li {
					padding-left: .74rem;
					text-align: left;
					margin-bottom: .3rem;
					height: auto;
					font-family: @font-rl;
					font-size: .32rem;
					color: #464646;
					line-height: .5rem;
					position: relative;
					&::before {
						content: ' ';
						background-size: 100%;
						position: absolute;
						height: .4rem;
						width: .4rem;
						position: absolute;
						left: .05rem;
						top: .05rem;
					}
					&.mxfq::before {
						background-image: url('../../assets/imgs/icon-mxfq.png');
					}
					&.wygm::before {
						background-image: url('../../assets/imgs/icon-wygm.png');
					}
					&.zpbz::before {
						background-image: url('../../assets/imgs/icon-zpbz.png');
					}
					&.bjfq::before {
						background-image: url('../../assets/imgs/icon-bjfq.png');
					}
					&.sdfh::before {
						background-image: url('../../assets/imgs/icon-sdfh.png');
					}
					&.jgsm::before {
						background-image: url('../../assets/imgs/icon-jgsm.png');
					}
					.content {
						font-family: @font-rl;
						font-size: .28rem;
						color: #909090;
						line-height: .4rem;
						letter-spacing: 0;
					}
				}
			}
		}
		.pbtn {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			height: 1rem;
			background-color: @app-color;
			color: #464646;
			font-size: .32rem;
			text-align: center;
			line-height: 1rem;
		}
		.img-box {
			img {
				width: 100%;
				height: 100%;
			}
		}
		.goods-menu {
			height: 6rem;
		}
		.weui-actionsheet__cell {
			padding: 0;
			&:hover {
				background-color: #fff;
			}
		}
		.weui-actionsheet {
			transform: translate(0, 120%);
		}
		.weui-actionsheet_toggle {
			transform: translate(0, 0);
		}
		.goods-classify {
			height: 1.6rem;
			overflow: hidden;
			border-bottom: 0.01rem solid #f2f2f2;
			.classify-box {
				overflow: scroll;
				height: 100%;
				&::after {
					content: " ";
					clear: both;
					display: block;
					width: 100%;
					height: .3rem;
				}
				li {
					border: .01rem solid #f2f2f2;
					float: left;
					margin-top: .3rem;
					margin-right: .3rem;
					font-family: @font-rl;
					font-size: .3rem;
					color: #464646;
					text-align: left;
					padding: .08rem .2rem;
					height: auto;
					border-radius: .14rem;
					&.active {
						background-color: @app-color;
						border-color: @app-color;
					}
				}
			}
		}
		.goods-nums {
			height: 1rem;
			display: flex;
			align-items: center;
			border-bottom: 0.01rem solid #f2f2f2;
			span {
				font-family: @font-rl;
				font-size: .3rem;
				color: #464646;
				flex: 1;
				text-align: left;
			}
			.input-box {
				display: flex;
				flex-direction: row;
				width: 1.5rem;
				align-items: center;
				line-height: .44rem;
				font-size: .24rem;
				color: #909090;
				justify-content: space-between;
				.i-btn {
					width: .44rem;
					height: .44rem;
					border: none;
					background-color: #F2F2F2;
				}
				input {
					width: .56rem;
					height: .44rem;
					background-color: #f2f2f2;
					border: none;
					padding: 0;
					margin: 0;
					text-align: center;
				}
			}
		}
		.goods-pay {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 1rem;
			background-color: @app-color;
			color: #464646;
			font-size: .32rem;
			text-align: center;
			line-height: 1rem;
		}
		.menu-header-box {
			padding: 0 .3rem;
			.menu-header {
				height: 2.06rem;
				border-bottom: .01rem solid #f2f2f2;
				position: relative;
				display: flex;
				.h-left {
					width: 2.1rem;
					height: 2.1rem;
					padding: .05rem;
					border-radius: .06rem;
					border: .01rem solid #f2f2f2;
					background-color: #fff;
					position: absolute;
					top: -0.35rem;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.h-right {
					box-sizing: border-box;
					margin-left: 2.4rem;
					width: 4.5rem;
					text-align: left;
				}
				.h-close {
					height: .7rem;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					img {
						width: .3rem;
						height: .3rem;
					}
				}
				.title {
					&:extend(.ecs);
					line-height: .4rem;
					height: .4rem;
					margin-bottom: .3rem;
					overflow: hidden;
					font-family: @font-rl;
					font-size: .32rem;
					color: #464646;
				}
				.price {
					height: .45rem;
					font-family: @font-rl;
					font-size: .28rem;
					color: #909090;
				}
			}
		}
		.swiper {
			height: 7.5rem;
			position: relative;
			.vux-icon-dot.active {
				background-color: @app-color !important;
			}
			.goods-tag {
				position: absolute;
				top: .1rem;
				right: .1rem;
				z-index: 999;
				.tag {
					padding: .01rem .1rem;
					border-radius: .08rem;
					color: #fff;
					font-family: @font-rl;
					font-size: .2rem;
					margin-left: .06rem;
				}
			}
		}
		.goods-info {
			padding: .3rem;
			background-color: #fff;
			border-bottom: .01rem solid #f2f2f2;
			.title {
				font-family: @font-rl;
				font-size: .32rem;
				color: #464646;
				letter-spacing: 0;
				&:extend(.ecs-2);
			}
			.info {
				padding: .06rem 0;
				font-family: @font-rl;
				font-size: .28rem;
				color: #909090;
				letter-spacing: 0;
				&:extend(.ecs-5);
			}
			.price-box {
				display: flex;
				height: .6rem;
				align-items: center;
				justify-content: space-between;
				flex-direction: row;
				.price {
					font-family: @font-rl;
					font-size: .28rem;
					color: #909090;
				}
				.app-color-x {
					font-size: .36rem;
					font-weight: 6600;
				}
				.scale {
					font-family: @font-rl;
					font-size: .28rem;
					color: #909090;
				}
			}
			.basep-box {
				display: flex;
				justify-content: space-between;
				font-family: @font-rl;
				font-size: .28rem;
				color: #BCBCBC;
				span:first-child {
					color: #909090;
				}
				.base-price {
					text-decoration: line-through;
				}
			}
			.overseas {
				height: .7rem;
				font-size: .24rem;
				color: #464646;
				background-color: #f2f2f2;
				padding: 0 .3rem;
				margin-top: .3rem;
			}
			.originImageUrl {
				width: .35rem;
				height: .35rem;
				margin-right: .18rem;
				border-radius: 50%;
				-webkit-border-radius: 50%;
				-moz-border-radius: 50%;
				overflow: hidden;
				position: relative;
			}
			.overseas img {
				height: .35rem;
				width: .5rem;
				position: absolute;
				left: -.06rem;
			}
		}
		.classify-list {
			margin-top: .18rem;
			background-color: #fff;
			padding: 0 .3rem;
			.classify-item {
				height: 1rem;
				display: flex;
				font-family: @font-rl;
				font-size: .3rem;
				color: #464646;
				align-items: center;
				position: relative;
				border-bottom: .01rem solid #f2f2f2;
				.classify-show {
					&:extend(.ecs);
				}
				&:last-child {
					border-bottom: 0 solid #f2f2f2;
				}
				&::after {
					content: " ";
					background-image: url('../../assets/imgs/cor_right.png');
					width: .1rem;
					height: .2rem;
					background-size: 100%;
					position: absolute;
					right: 0;
					top: .4rem;
				}
				&.icons {
					justify-content: space-between;
					padding-right: .5rem;
					.img-tip {
						display: flex;
						align-items: center;
						flex-direction: row;
						font-family: @font-rl;
						font-size: .24rem;
						color: #909090;
						img {
							margin-right: .1rem;
							width: .4rem;
							height: .4rem;
						}
					}
					.mxfq {
						width: .24rem;
						height: 0.285rem;
					}
				}
			}
			
		}
		.img-info-header {
			height: .8rem;
			display: flex;
			justify-content: center;
			align-items: center;
			img {
				width: 3.1rem;
			}
		}
		.img-infos {
			overflow: hidden;
			img {
				width: 100%;
				float: left;
			}
		}
		.footertext {
			  padding: .1rem 0;
			  font-size: .22rem;
			}
	}
</style>